import PropTypes from 'prop-types';
import { SearchBar } from "antd-mobile";
import styles from "./SearchBox.module.less";

const SearchBox = (props) => {
  return (
    <div className={styles['search-box']}>
      <SearchBar
        placeholder={props.placeholder}
        cancelText="搜索"
        showCancelButton
        clearOnCancel={false}
        style={{ margin: "12px" }}
        onChange={(val) => {
          props.setSearchTxtHandler(val);
        }}
        onClear={() => {
          props.setSearchTxtHandler(null);
          props.searchHandler();
        }}
        onCancel={() => { // search
          props.searchHandler();
        }}
      />
    </div>
  );
};

SearchBox.propTypes = {
  placeholder: PropTypes.string,
  searchHandler: PropTypes.func,
  setSearchTxtHandler: PropTypes.func
};

export default SearchBox;
